<template>
	<div class="container">
		<div class="jx-container">
      <div class="select-type">
        <div class="item table-item">
          <div class="right">
            <div class="item-inline">
              <span>会员价格</span>
              <el-input class="tel-value" v-model="params_list.name" type="number" placeholder="请输入会员价格"></el-input>
            </div>
            <div class="item-inline">
              <el-button class="jx-btn" type="primary" @click="search">搜索</el-button>
            </div>
          </div>
        </div>
      </div>
      <div class="merber-type">
        <div class="title blue">会员福利</div>
        <div class="merber-con">
          <div class="name">加油卡</div>
          <div class="card">
            <el-checkbox v-model="params_list.isCard" @change="getCard">送加油卡</el-checkbox>
            <div class="item-line" v-if="params_list.isCard">
              <span class="green" style="margin-right: 10px;">卡内余额100元；每月5日，充值100元；连续充值12个月；商品由云途养护旗舰店发货；</span>
              <el-button @click="editCard()" type="text" size="small">修改</el-button>
            </div>
          </div>
        </div>
      </div>
      <div class="jx-table">
        <div class="title">
          <img class="icon" src="/static/img/icon-platform.png"/>
          会员福利活动
          <div class="add-new">
            <el-button class="jx-btn" type="primary" @click="addRow">新增活动</el-button>
          </div>
        </div>
        <el-table :data="list" border style="width: 100%" v-loading="boo.loading">
          <el-table-column type="index" label="序列" width="60" align="center">
            <template slot-scope="scope">
              <span>{{(scope.$index + 1) + ((params_list.page - 1) * params_list.size)}}</span>
            </template>
          </el-table-column>
          <el-table-column prop="start" label="开始时间" align="center" :show-overflow-tooltip="true">
          </el-table-column>
          <el-table-column prop="end" label="结束时间" align="center" :show-overflow-tooltip="true">
          </el-table-column>
          <el-table-column prop="sum" label="会员限领次数" align="center" :show-overflow-tooltip="true">
          </el-table-column>
          <el-table-column prop="type" label="活动类型" align="center" :show-overflow-tooltip="true">
          </el-table-column>
          <el-table-column prop="status" label="活动状态" align="center" width="90">
            <template slot-scope="scope">
              <span v-if="scope.row.status == 1">正常</span>
              <span v-else>已过期</span>
            </template>
          </el-table-column>
          <el-table-column label="操作" width="160" align="center">
            <template slot-scope="scope">
              <el-button @click="viewRow(scope.row)" type="text" size="small">查询详情</el-button>
              <el-button v-if="scope.row.status == 1" @click="hiddenRow(scope.row)" type="text" size="small">终止活动</el-button>
            </template>
          </el-table-column>
        </el-table>
        <div v-if="list.length != 0" class="jx-pagination">
          <el-pagination @current-change="pageChange" @size-change="handleSizeChange" :current-page="params_list.page" :page-sizes="[10,50,100]" :page-size="params_list.size" layout="total, sizes, prev, pager, next, jumper"
            :total="other.allRow">
          </el-pagination>
        </div>
      </div>
    </div>
    <!-- 送油卡 -->
    <el-dialog  :visible.sync="boo.showDialog" class="jx-dialog" width="65%">
      <div slot="title" class="header-title">
        <span class="title-name">送油卡活动</span>
      </div>
      <el-form ref="form" :model="currentRow" :rules="rules" label-width="110px" class="jx-form">
        <div class="jx-detail">
          <div class="detail-item">
            <div class="item">
              <div class="title">基本信息</div>
              <el-form-item label="默认面值：" prop="price">
                <el-input v-model="currentRow.price" placeholder="请输入默认面值"></el-input>
              </el-form-item>
              <el-form-item label="充值次数：" prop="sum">
                <el-input v-model="currentRow.sum" placeholder="请输入充值次数"></el-input>
              </el-form-item>
              <el-form-item label="充值日期：" prop="data">
                <div class="item-data">
                  <span>每月</span>
                  <el-select class="tel-value" v-model="currentRow.data" placeholder="请选择">
                    <el-option label="5" value="1"></el-option>
                    <el-option label="10" value="2"></el-option>
                    <el-option label="15" value="1"></el-option>
                    <el-option label="20" value="2"></el-option>
                    <el-option label="25" value="1"></el-option>
                    <!-- <el-option label="30" value="2"></el-option> -->
                  </el-select>
                  <span>号</span>
                </div>
              </el-form-item>
              <el-form-item label="承销店铺：" prop="name">
                <el-autocomplete
                  class="inline-input"
                  v-model="currentRow.name"
                  :fetch-suggestions="querySearch"
                  placeholder="请输入店铺"
                  :trigger-on-focus="false"
                  @select="handleSelect"
                ></el-autocomplete>
              </el-form-item>
            </div>
          </div>
        </div> 
      </el-form>
      <div class="btn-container">
        <el-button class="jx-btn" type="warning" @click="boo.showDialog = false">取消</el-button>
        <el-button class="jx-btn" type="primary" :loading="boo.saveing" @click="submitRow('form')">确定</el-button>
      </div>
    </el-dialog>
	</div>
</template>

<script>
  import list from 'static/json/promotion/member.json'
	export default {
		data() {
			return {
        boo: {
          loading: false,
          showDialog: false,
          saveing: false,
        },
        other: {
          allRow: 1,
        },
        list: list,
        currentRow: {},
        restaurants: [],
        params_list: {
          page: 1,
          size: 10,
          name: '',
          isCard: false,
        },
        rules: {
          price: [{ required: true, message: '请输入渠道名称', trigger: 'blur' }],
          sum: [{ required: true, message: '请输入渠道ID', trigger: 'blur' }],
          data: [{ required: true, message: '请选择日期', trigger: 'change' }],
          name: [{ required: true, message: '请输入店铺名称', trigger: 'blur' }],
        },
			}
		},
		mounted(){
      let _self = this
      _self.getList()
      this.restaurants = this.loadAll();
    },
		methods: {
      getList(){},
      pageChange(val){
        let _self = this
        _self.params_list.page = val
        _self.getList()
      },
      handleSizeChange(val) {
        let _self = this
        _self.params_list.size = val
        _self.getList()
      },
      search(){
        let _self = this
      },
      // 选择加油卡
      getCard(label){
        let _self = this
      },
      //修改送卡活动
      editCard(){
        let _self = this
        _self.boo.showDialog = true
        _self.currentRow = {}
      },
      querySearch(queryString, cb) {
        var restaurants = this.restaurants;
        var results = queryString ? restaurants.filter(this.createFilter(queryString)) : restaurants;
        // 调用 callback 返回建议列表的数据
        cb(results);
      },
      createFilter(queryString) {
        return (restaurant) => {
          return (restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0);
        };
      },
      loadAll() {
        return [
          { "value": "云途养护官方旗舰店", "id": "1" },
          { "value": "云途养护官方旗舰店2", "address": "上海市长宁区淞虹路661号" },
          { "value": "新旺角茶餐厅", "address": "上海市普陀区真北路988号创邑金沙谷6号楼113" },
          { "value": "泷千家(天山西路店)", "address": "天山西路438号" },
          { "value": "胖仙女纸杯蛋糕（上海凌空店）", "address": "上海市长宁区金钟路968号1幢18号楼一层商铺18-101" },
          { "value": "贡茶", "address": "上海市长宁区金钟路633号" },
          { "value": "豪大大香鸡排", "address": "上海市嘉定区曹安公路曹安路1685号" },
        ];
      },
      handleSelect(item) {
        console.log(item);
      },
      addRow(){
        let _self = this
        let params = {
          path: '/promotion/detail/member_add',
        }
        _self.$router.push(params.path)
      },
      hiddenRow(){
         
      },
      viewRow(item){
        let _self = this
        let params = {
          path: '/promotion/detail/member_detail?id=',
          query: item.id
        }
        _self.$router.push(params.path + params.query)
      },
      submitRow(formName){
        let _self = this
				this.$refs[formName].validate((vaild)=>{
					if(vaild){  
            // _self.boo.saveing = true
            // let params = {
            //   name: _self.currentRow.name,
            // }    
            // let success = (res)=>{
            //   res = res.data
            //   if(res.status == 200){
            //     _self.getList()
            //   }else{
            //     _self.$message.error(res.message)
            //   }
            //   _self.boo.saveing = false
            //   _self.boo.showDialog = false
            // }
            // _self.$axios.post(_self.https.checked, params, success) 
            _self.boo.showDialog = false     
					}else{
						return false
					}
				})
      }
    }
	}

</script>
<style scoped lang="sass">
  .select-type .table-item .right span
    width: 62px
  .merber-type
    .title
      margin-bottom: 20px
    .merber-con
      padding-left: 15px
      .name
        padding-bottom: 5px
        border-bottom: 1px solid #e4e4e4
        margin-bottom: 10px 
      .card
        padding-left: 35px
        .item-line
          display: inline-block
          margin-left: 30px
  .item-data
    span
      display: inline-block
      width: 10%
    .el-select
      display: inline-block
      width: 55%
  .jx-dialog
    .el-autocomplete
      width: 70%
      /deep/ .el-input--small
        width: 100%
</style>
